<template>
  <div class="about">
    <ul>
      <li :class="i <= index ? 'active': ''" v-for="(item, i) in list" @click="step(i)" :key="i">{{item.type}}</li>
    </ul>
    {{list[index].name}}：<input type="text" v-model="content">
    <my-button @next="next" @submit="submit" @prev="prev" :index="index"></my-button>
    <div v-show="show">
      <section v-for="(item, index) in list" :key="index">{{item.name}}:{{item.content}}</section>
      <br>
      <button @click="clear">清空重填</button>
    </div>
  </div>
</template>
<script>
import myButton from '@/components/myButton'
export default {
  components: {
    myButton
  },
  data() {
    return {
      list: [
        {
          type: '第一步',
          name: '商品名称',
          content: ''
        },
        {
          type: '第二步',
          name: '商品价格',
          content: ''
        },
        {
          type: '第三步',
          name: '商品图片',
          content: ''
        },
        {
          type: '第四步',
          name: '商品库存',
          content: ''
        }
      ],

      content: '',
      index: 0,
      show: false
    }
  },
  methods: {
    // 下一步
    next() {
      if(this.list[this.index].content) {
        this.index++
        if(this.list[this.index].content) {
          this.content = this.list[this.index].content
        } else {
          this.content = ''
        }
      } else {
        alert('内容不能为空')
      }
    },
    // 上一步
    prev() {
      this.index--
      this.content = this.list[this.index].content
    },
    step(i) {
      if(i > 0) {
        if(this.list[i - 1].content) {
          this.index = i
          this.content = this.list[i].content
        } else {
          alert('内容不能为空')
        }
      } else {
        this.index = 0
        this.content = this.list[0].content
      }
    },

    submit() {
      if(this.list[3].content) {
        this.show = true
      } else {
        alert('内容不能为空')
      }
    },

    // 清空
    clear() {
      this.list.forEach(item => {
        item.content = ''
      })
      this.content = ''
      this.index = 0
      this.show = false
    }
  },

  watch: {
    content(to) {
      this.list[this.index].content = to
    }
  }
}
</script>
<style lang="scss" scoped>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-bottom: 20px;
    li {
      margin-right: 10px;
    }
    .active {
      color: green;
    }
  }
  
</style>
